<template>
  <div ref="queryForm" class="queryForm" :style="{ '--theme': theme }">
    <template v-for="(item, index) in options">
      <!-- 按钮 -->
      <template v-if="item.type === 'button'">
        <el-button
          v-if="!item.advanced"
          :key="item.type + index"
          v-throttle
          v-permission="item.permission ? $route.meta.permission + ':' + item.permission : ''"
          :type="item.btnType"
          :icon="item.icon"
          :class="[
            item.text === '删除'
              ? ''
              : item.class,
            disabled ? '' : item.class,
            { commonFormMargin: item.float },
          ]"
          :size="size"
          :style="{ float: item.float }"
          :disabled="item.disabled === undefined
            ? item.text === '删除' ? disabled : false
            : item.disabled
          "
          @click="handlerClick(item)"
        >{{ item.text ? item.text : "默认按钮" }}</el-button>
        <TableSearch
          v-else
          :key="item.type + index"
          ref="tableSearch"
          :advanced-width="advancedWidth"
          @advancedSearch="advancedSearch"
        >
          <template slot="advanced-content">
            <slot name="advanced-content" />
          </template>
          <el-button
            slot="reference"
            v-throttle
            :type="item.btnType"
            :icon="item.icon"
            :class="item.class"
            :size="size"
            :style="{ float: item.float, 'marginLeft': '10px' }"
          >
            {{ item.text ? item.text : "高级搜索" }}
          </el-button>
        </TableSearch>
      </template>
      <!-- 搜索框 -->
      <template v-else-if="item.type === 'search'">
        <div :key="item.type + index" :style="{ float: item.float }">
          <el-input
            v-model="item.bindValue"
            :size="size"
            :class="item.class"
            class="search"
            :placeholder="item.placeholder"
            @keyup.enter.native="handlerClick(item)"
          />
        </div>
      </template>
      <!-- 单选按钮框 -->
      <template v-else-if="item.type === 'radio'">
        <div :key="item.type + index" :style="{ float: item.float }">
          <el-radio-group v-model="item.bindValue" :size="size" @change="handlerClick(item)">
            <el-radio-button v-for="ite in item.option" :key="ite.id" :label="ite.label" :value="ite.value" />
          </el-radio-group>
        </div>
      </template>
      <!-- 下拉框 -->
      <template v-else-if="item.type === 'select'">
        <div :key="item.type + index" :style="{ float: item.float }">
          <el-select
            v-model="item.bindValue"
            :placeholder="item.placeholder"
            :allow-create="item.allowCreate"
            :remote="item.remote ? true : false"
            :loading="loading"
            filterable
            clearable
            class="search"
            :size="size"
            :remote-method="remoteMethod"
            @change="handlerClick(item)"
          >
            <el-option v-for="ite in remoteOption" :key="ite.id" :label="ite.label" :value="ite.value" />
          </el-select>
        </div>
      </template>
      <!-- 日期选择器 -->
      <template v-else-if="item.type === 'date'">
        <div :key="item.type + index" :style="{ float: item.float }">
          <el-date-picker
            v-model="item.bindValue"
            :type="item.format"
            class="search"
            :size="size"
            :value-format="item.format"
            :clearable="false"
            :placeholder="item.placeholder"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
      </template>
      <!-- 插槽，自定义内容 -->
      <template v-else-if="item.type === 'search'">
        <div :key="item.type + index" :style="{ float: item.float }">
          <slot :name="item.label" :row="item" />
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import TableSearch from '../TableSearch'
export default {
  components: {
    TableSearch
  },
  props: {
    // 表单数组
    // eslint-disable-next-line vue/require-default-prop
    options: Array,
    // 按钮是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 高级查询弹窗宽度
    advancedWidth: {
      type: Number,
      default: 400
    }
  },
  data() {
    return {
      // 加载开关
      loading: false,
      // 远程搜索结果
      list: []
    }
  },
  computed: {
    // 布局大小
    size() {
      return this.$store.state.app.size
    },
    // 主题
    theme() {
      return this.$store.state.settings.theme
    },
    // 下拉选项数组
    remoteOption() {
      const params = this.options.find(item => item.type === 'select')
      return params.remote ? this.list.map(item => {
        return { id: item[params.props['id'] || 'id'], label: item[params.props['label'] || 'label'], value: item[params.props['value'] || 'value'] }
      }) : this.list
    }
  },
  methods: {
    handlerClick(row) {
      this.$emit('handlerClick', row)
    },
    remoteMethod(val) {
      const e = this.options.find(item => item.type === 'select')
      if (val) {
        const form = {}
        form[e.label] = val
        this.loading = true
        e['remote'](form).then(res => {
          this.list = res.data
        }).finally(() => {
          this.loading = false
        })
      }
    },
    advancedSearch() {
      this.$emit('advancedSearch', {})
    }
  }
}
</script>
<style lang="scss" scoped>
.queryForm {
  width: 100%;
  overflow: hidden;
  margin: 0.45rem 0;
}

.refreshBtn {
  color: var(--theme);
  border-color: var(--theme);
}

.deleteBtn {
  color: #f56c6c;
  border-color: #f56c6c;
}

.infoBtn {
  color: #7a7a7a;
  border-color: #7a7a7a;
}

::v-deep .el-button--primary {
  background-color: var(--theme) !important;
  border: 1px solid var(--theme) !important;
}

</style>
